<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-03-14 19:03
 * @version 2.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 */
 -->
<template>
  <vue-draggable
    v-model="children"
    :options="draggableOptions"
    tag="a-row"
    class="x-render-drag-container"
    :class="{'x-render-drag-container-active': active }"
    @end="$emit('end',$event)"
    @add="$emit('add',$event)"
  >
    <template v-for="(item,index) in children">
      <a-col
        :key="item.id"
        v-bind="item.layout"
        class="x-render-form-item"
        :class="{'x-render-form-item-active': currentId === item.id,'x-render-form-item-not-layout': !item.isLayout }"
        @click.stop.prevent="$emit('selected',item)"
      >
        <component
          v-if="item.isLayout"
          :is="component(item.type)"
          v-bind="item"
          v-on="$listeners"
        />
        <x-render-form-item
          v-else
          :data="item"
          :formData="formData"
          v-on="$listeners"
        ></x-render-form-item>
        <slot name="draggable-nav" :data="item">
          <x-render-draggable-navbar
            :data="item"
            :active="currentId === item.id"
            v-on="$listeners"
            @remove="$emit('remove',item, index === 0 ? (children[index + 1] ? children[index + 1] : null) : children[index-1])"
          />
        </slot>
      </a-col>
    </template>
  </vue-draggable>
</template>

<script>
import { COMPONENT_TYPE } from '../../constants'
import XRenderDraggableNavbar from './XRenderDraggableNavbar'

export default {
  name: COMPONENT_TYPE.DRAGGABLE,
  components: {
    XRenderDraggableNavbar
  },
  props: {
    /**
     * 当前
     */
    active: {
      type: Boolean,
      default: false
    },
    component: {
      type: Function
    },
    currentId: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    draggableOptions: {
      get() {
        return {
          group: 'XRenderForm',
          sort: true,
          animation: 300,
          draggable: '.x-render-form-item',
          handler: '.x-render-form-item',
          disabled: false
        }
      }
    },
    children: {
      get() {
        const { list } = this
        return list || []
      },
      set(val) {
        this.$emit('data-change', val)
      }
    }
  }

}
</script>

<style scoped lang="css">
.x-render-drag-container {
  width: 100%;
  min-height: 300px;
}

.x-render-drag-container-active {
  background-color: rgba(64, 154, 255, .05);
  border: 1px dashed #dcdfe6;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
}

/* 表单项 */
.x-render-drag-container .x-render-form-item {
  background: white;
  cursor: move;
  position: relative;
  padding: 10px 20px;
  transition: all .35s;
  overflow: hidden;
}

.x-render-drag-container .x-render-form-item:hover {
  background-color: rgba(64, 158, 255, .3);
}

.x-render-drag-container .x-render-form-item::before {
  content: '';
  height: 5px;
  width: 100%;
  background: rgba(64, 158, 255, .9);
  position: absolute;
  top: 0;
  right: -110%;
  transition: all .3s;
}

/* 表单项激活时 */
.x-render-drag-container .x-render-form-item-active {
  background-color: rgba(64, 158, 255, .3);
}

.x-render-drag-container .x-render-form-item-active::before {
  right: 0;
}

/* 遮挡区(遮挡住，不允许直接输入等操作) */
.x-render-drag-container .x-render-form-item-not-layout::after {
  content: " ";
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 2;
}
</style>
